<template>
    <div class="cgs-nav flex-row">
        <div v-show="showArrow" class="nav-item-left" @click.stop="handleLeft">
            <div class="nav-icon left" style="transform: rotate(180deg)"></div>
        </div>
        <div ref="navMiddle" class="nav-middle" :class="{noArrow: !showArrow}">
            <div class="nav-middle-container flex-row"
                 :style="{left: middleLeft + 'px'}"
                 @wheel="handleWheel"
            >
                <div class="cgs-nav-item no-select"
                     v-for="nav in data"
                     :class="{'cgs-nav-active': nav.index === (defaultActive || itemId)}"
                     :style="{width: nav.length * 18 + 'px'}"
                     :key="nav.index"
                     @click.stop="handleItemClick(nav.index)"
                >
                    {{nav.title}}
                </div>
            </div>
        </div>

        <div v-show="showArrow" class="nav-item-right" @click.stop="handleRight">
            <div class="nav-icon left"></div>
        </div>

        <slot name="buttons"></slot>
    </div>
</template>

<script>
    import {getStringLength} from "../../utils/utils";

    export default {
        name: "CgsNav",
        props: {
            data: {
                default: []
            },
            defaultActive: String,
            size: {
                default: 'default'
            }
        },
        data() {
            return {
                navMiddleWidth: 0,
                middleLeft: 0,
                itemId: null,
                eventListener: null
            }
        },
        methods: {
            handleLeft() {
                if (this.middleLeft < 0) {
                    this.middleLeft += 80
                    if (this.middleLeft > 0) {
                        this.middleLeft = 0
                    }
                }
            },
            handleRight() {
                if (Math.abs(this.middleLeft) + this.navMiddleWidth < this.length) {
                    this.middleLeft -= 80
                } else {
                    this.middleLeft = this.navMiddleWidth - this.length - 40
                }
            },
            handleWheel(event) {
                let delta = 0;
                if (!event) event = window.event;
                if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
                    delta = event.wheelDelta / 120;
                    if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
                } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
                    delta = -event.detail / 3;
                }
                if (delta > 0) this.handleLeft()
                else this.handleRight()
            },
            handleItemClick(itemId) {
                this.itemId = itemId;
                this.$emit('itemChange', itemId)
            }
        },
        computed: {
            showArrow() {
                return this.length > this.navMiddleWidth
            },
            length() {
                let length = 0
                this.data.forEach(d => {
                    length += getStringLength(d.title) * 9 + 40
                })
                return length
            }
        },
        mounted() {
            this.navMiddleWidth = this.$refs.navMiddle.clientWidth - 60;

            this.eventListener =  window.onresize = () => {
                return (() => {
                    if (!this.$refs.navMiddle) {
                        return
                    }
                    this.navMiddleWidth = this.$refs.navMiddle.clientWidth - 60;
                    this.middleLeft = 0
                })();
            };
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.eventListener)
        }
    }
</script>

<style scoped>
    .cgs-nav{
        height: 60px;
        width: 100%;
        align-items: center;
    }
    .cgs-nav-item{
        height: 40px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #DCDCDC;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        margin-right: 40px;
    }
    .cgs-nav-active, .cgs-nav-item:hover{
        color: #FFFFFF;
        border-bottom: 6px solid;
        border-image-source: linear-gradient(270deg, rgba(255, 17, 198, 0.12) 0%, #455EB5 100%);
        border-image-slice:1;
    }
    .nav-item-left {
        width: 30px;
        height: 30px;
        background: #313F52;
        border: 0 solid #747474;
        cursor: pointer;
        flex: 0 0 30px;
    }
    .nav-middle {
        overflow: hidden;
        margin: auto 30px;
        flex: 1 1 auto;
    }
    .noArrow {
        left: 0;
    }
    .nav-middle-container {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .nav-item-right {
        width: 30px;
        height: 30px;
        background: #313F52;
        border: 0 solid #747474;
        margin-right: 20px;
        cursor: pointer;
        flex: 0 0 30px;
    }
    .nav-icon {
        width: 20px;
        height: 20px;
        margin: 5px;
        rotation: 180deg;
        background-position: center;
        background-size: 100% 100%;
    }
</style>
